<template>
  <div class="dialog-box">
    <el-dialog
      class="self-dialog"
      :close-on-click-modal="false"
      :model-value="modelValue"
      :title="title"
      :width="width"
      :top="top"
      @close="onClose"
      :show-close="showClose"
      :center="center"
    >
      <slot></slot>
      <template #header>
        <slot name="headerTip"></slot>
      </template>
      <template #footer v-if="footer">
        <div class="dialog-footer flex-yc flex-xbt">
          <slot name="footerTip" v-if="$slots.footerTip"></slot>
          <i v-else></i>
          <div style="display: inline-block">
            <el-button size="large" @click="onClose">{{ cancelTxt }}</el-button>
            <el-button size="large" type="primary" @click="onSubmit">
              {{ submitTxt }}
            </el-button>
          </div>
          <i v-if="center"></i>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    modelValue: boolean
    width?: string
    title?: string
    cancelTxt?: string
    submitTxt?: string
    showClose?: boolean
    center?: boolean
    footer?: boolean
    top?: string
  }>(),
  {
    width: '376',
    title: '温馨提示',
    cancelTxt: '取消',
    submitTxt: '确定',
    showClose: true,
    center: false,
    footer: true,
    top: '15vh',
  },
)

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
  (e: 'onSubmit', val: boolean): void
  (e: 'onClose', val: boolean): void
}>()

const onClose = () => {
  emit('update:modelValue', false)
  emit('onClose', false)
}
const onSubmit = () => {
  //emit('update:modelValue', false)
  emit('onSubmit', true)
}
</script>

<style scoped lang="scss">
.dialog-box {
  :deep(.el-dialog) {
    padding: 0;

    .el-dialog__header {
      display: flex;
      align-items: center;
      height: 46px;
      padding: 0 16px;
      line-height: 46px;
      border-bottom: 1px solid $borderCol;

      .el-dialog__headerbtn {
        width: 46px;
        height: 46px;
      }
    }

    .el-dialog__body {
      padding: 16px 16px 30px;
    }

    .el-dialog__footer {
      padding: 0 16px 16px;
    }
  }
}
</style>
